<template>
  <div class="select_sort" @mouseleave="screenMouseleave">
    <div class="sort_left">
      <div
        v-for="(v, i) in screenList"
        :key="i"
        @click="screenListClick(v.dataId)"
        :class="[
          'sort_div',
          v.select ? 'con_div' : '',
          v.select ? 'active1' : '',
        ]"
      >
        {{ v.title }}
        <p :class="[v.select ? 'p_div' : '']"></p>
      </div>
    </div>
    <div class="sort_right">
      <div class="right_div">
        <div
          v-for="(v, i) in screenLIstCon"
          :key="i"
          @click.stop="screenLIstConClick(v.dataId)"
          :class="['sort_div', v.select ? 'active1' : '']"
        >
          {{ v.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBaseList } from "@/api/user";

export default {
  /**
   * @name 点击选择分类——浮动
   */
  data() {
    return {
      //内容——左——列3——是否打开
      // screenChecked: false,
      //内容——左——列3——屏幕模式-左
      screenListChecked: null,
      screenList: [],
      //内容——左——列3——屏幕模式-右
      screenLIstConChecked: null,
      screenLIstCon: [],
      parId: null,
      sonId: null,
    };
  },
  watch: {
    parId(val) {
      let index = this.screenList.findIndex((v) => {
        return v.dataId === val;
      });
      this.screenList.forEach((v) => (v.select = false));
      this.screenList[index].select = true;
      this.baseListVal(val);
    },
    sonId(val) {
      let index = this.screenLIstCon.findIndex((v) => {
        return v.dataId === val;
      });
      this.screenLIstCon.forEach((v) => (v.select = false));
      this.screenLIstCon[index].select = true;
      //把参数给上一层
      this.$emit("childlist", this.parId, this.sonId);
    },
  },
  methods: {
    screenListClick(id) {
      this.parId = id;
    },
    //内容——左——列3——屏幕模式——鼠标离开消失
    screenMouseleave() {
      this.$emit("childleave", false);
    },
    //内容——左——列3——屏幕模式-右-点击选中
    screenLIstConClick(id) {
      this.sonId = id;
    },
    async baseListVal(parentId) {
      let info = await getBaseList({ parentId, dataType: 1 });
      this.screenLIstCon = [];
      if (info.data.data) {
        info.data.data.forEach((v) => {
          v.select = false;
          this.screenLIstCon.push(v);
        });
      }
    },
    async baseListValue() {
      let info = await getBaseList({ parentId: 0, dataType: 1 });
      if (info.data.data) {
        info.data.data.forEach((v) => {
          v.select = false;
          this.screenList.push(v);
        });
      }
      this.screenList[0].select = true;
    this.parId = this.screenList[0].dataId;
      let info1 = await getBaseList({
        parentId: info.data.data[0].dataId,
        dataType: 1,
      });
      if (info1.data.data) {
        info1.data.data.forEach((v) => {
          v.select = false;
          this.screenLIstCon.push(v);
        });
      }
    },
  },
  created() {
    this.baseListValue()
   
  },
 
};
</script>
<style lang="less" scoped>
@import "../../assets/styles/frame.less";
.list-headimg-enter,
.list-headimg-leave-to {
  opacity: 0;
  transform: translateY(10px);
  transform: translateX(-20px);
}
.model {
  float: left;
  width: 109px;
  height: 100%;
}
.modeldiv {
  width: 90%;
  height: 36px;
  margin-bottom: 12px;
  border-radius: 6px;
  .cen();
}
.select_sort {
  position: absolute;
  // right: -251px;
  top: 0;
  left: 261px;
  width: 240px;
  height: 500px;
  border-radius: @radius1;
  background: #fff;
  box-shadow: @shadow;
  padding: 18px 0 18px 10px;
  z-index: 9999;
  .sort_left {
    font-size: 13px;
    &::-webkit-scrollbar {
      width: 0px !important;
    }
    margin-right: 12px;
    .model();
    .roll();
    .sort_div {
      position: relative;
      cursor: pointer;
      .modeldiv();
    }
  }
  .sort_right {
    &::-webkit-scrollbar {
      width: 0px !important;
      height: 0px !important;
    }
    .model();
    .right_all {
      width: 100%;
      height: 36px;
      .cen();
      .roll();
    }
    .right_div {
      overflow-y: auto;
      width: 115px;
      .sort_div {
        cursor: pointer;
        .modeldiv();
      }
    }
  }
  .con_div {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      right: -9px;
      // top: 0;
      display: block;
      width: 0;
      height: 0px;
      border-top: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 5px solid rgb(4, 4, 4);
    }
  }
  .p_div {
    position: absolute;
    right: 1px;
    // top: 0;
    display: block;
    width: 3px;
    height: 36px;
    background: rgb(4, 4, 4);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
}
</style>